<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>封装$ajax</title>
</head>
<body>
<script>
    //柯里化函数思想 (颗粒化)
    //把一个非常大的功能进行细分,把每一个细分的点分到极致,并且对每个小的功能再次进行封装(高内聚低耦合)


    //惰性函数思想 在一些判断浏览器兼容问题的时候,有些结果只需要判断一次就可以了,但是由于方法的封装,每次使用的时候都会再去判断一次, 此时可以在第一次判断出结果之后,把原有方法直接重写,这样,在之后的调用中,都会使用重写后的方法了,然后也就不用再次判断了,这就是惰性函数思想

    function windowOrChrome(){
        let a = ""
        if(window.navigator.userAgent.indexOf("Chrome") !== -1){
            console.log("谷歌浏览器");
            a = 1;
        }else {
            console.log("其他浏览器");
            a = 2;
        }
        return function windowOrChrome(){
            return a
        }
    }
    windowOrChrome();

    window.$ = {
        ajax(options){
            console.log(options)
            /*if(!options.url){
                // throw new Error("请确保URL正确")
                options.url = window.location.href
            }*/
            options.url = options.url || window.location.href;
            options.method = options.method || "GET";
            options.data = options.data || null;
            options.async = options.async || false;
            options.success = options.success || function (res){};
            options.fail = options.fail || function (fail){};
            options.headers = options.headers || {}

            let xhr = new XMLHttpRequest();
            xhr.open(options.method, options.url, options.async);

            for (let key in options.headers){
                if(!options.headers.hasOwnProperty(key)) continue;
                xhr.setRequestHeader(key, options.headers[key])
            }


            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {//有响应回来
                    switch (xhr.status) {
                        case 200:
                            console.log("成功");
                           /* if(options.success){
                                options.success()
                            }*/
                            let res = JSON.parse(xhr.responseText)
                            options.success && options.success(res);
                            break;
                        /*case 404:
                            console.log("404");
                            break;*/
                        default:
                            console.log("Http状态码=>", xhr.status);
                            options.fail && options.fail({
                                msg: xhr.statusText,
                                code: xhr.status
                            });
                    }
                }
            }
            xhr.send(JSON.stringify(options.data));
        }
    }

    $.ajax({
        url:"https://cnodejs.org/api/v1/topics",
        success(res){
            console.log("$.ajaxde res==>",res)
        },
        fail(err){

            console.log("$.ajaxde err==>",err)
        },
        headers:{
            token: "123456789"
        }
    })

    //axios Ajax I/O(input/output) System
    let axios = {
        baseUrl:"",
        get(url, data){
            return new Promise((resolve, reject)=>{
                $.ajax({
                    url:this.baseUrl + url,
                    success(res){
                        console.log("$.ajaxde res==>",res);
                        resolve(res)
                    },
                    fail(err){
                        console.log("$.ajaxde err==>",err)
                        reject(err)
                    },
                    data:data
                })
            })
        }
    }
    axios.baseUrl = "https://cnodejs.org/api/v1"

    axios.get("/topics",{a:1}).then(res=>{
        console.log("axios",res)
    })


</script>
</body>
</html>